<template>
    <div class="app">
        <div style="position: fixed;top:0;" v-if="headerType == true">
            <div class="status-bar" :style="{height:statusBarHeight + 'px'}"></div>
            <navbar class="navbar" :style="{backgroundColor: 'white' }">
                <navbar-item type="left" @click="backClick">
                    <text class="iconLeft">&#xe659;</text>
                </navbar-item>
                <navbar-item type="title">
                    <div class="top_nav">
                        <div style="padding-left:10px;padding-right:10px;" v-for="(item,index) in nav" @click="toScroll(index)" :key="item">
                            <text style="font-size: 32px" :class="[navId==index?'naved':'nav']">{{item}}</text>
                        </div>
                    </div>
                </navbar-item>
            </navbar>
        </div>
        <div :style="{height:marginHeight}"></div>
        <scroll-view ref="myScroll" class="scroller" @scrolled="scrolledClick($event)">
            <div style="width: 750px;height: 1px">
            </div>
            <scroll-header @stateChanged="stateChanged(0, $event)"></scroll-header>
            <div class="details_swiper">
                <slider class="slider" interval="3000" auto-play="true" @change="changeHandler">
                    <div class="frame" v-for="img in swiperImg">
                        <image class="image" resize="cover" :src="img"></image>
                    </div>
                </slider>
                <div class="details_progress">
                    <text class="details_progress_title">{{current}}/{{swiperIndex}}</text>
                </div>
                <div style="position: fixed;top:0">
                    <div :style="{height:statusBarHeight + 'px'}"></div>
                    <div @click="backClick" class="return">
                        <div class="returnContent">
                            <text class="iconback">&#xe659;</text>
                        </div>
                    </div>
                </div>
            </div>
            <div style="position: relative">
                <div class="details_price_box details_bg_color">
                    <div class="details_price_left">
                        <text class="details_price_left_title">秒杀价</text>
                        <div class="details_price_left_bottom">
                            <text class="details_price_icon">¥</text>
                            <text class="details_price_title">{{parseInt(groupprice)}}</text>
                          <text class="details_price_market">¥{{ parseInt(marketPrice) }}</text>

                        </div>

                    </div>
                    <div class="group_header_dateConetnt">
                        <div class="group_header_content_titleBox">
                            <text class="group_header_content_title">距离结束：</text>
                        </div>
                        <div class="group_header_date">
                            <text class="group_header_date_title">{{date}}</text>
                        </div>
                          <text class="group_header_date_icon">:</text>
                        <div class="group_header_date">
                            <text class="group_header_date_title">{{hou}}</text>
                        </div>
                        <text class="group_header_date_icon">:</text>
                        <div class="group_header_date">
                            <text class="group_header_date_title">{{min}}</text>
                        </div>
                        <text class="group_header_date_icon">:</text>
                        <div class="group_header_date">
                            <text class="group_header_date_title">{{sec}}</text>
                        </div>
                    </div>
                </div>
                <div class="details_content">
                    <text class="details_content_title">{{product.name}}</text>
                    <text class="details_content_subtitle">{{product.subTitle}}</text>
                </div>
            </div>
            <scroll-header @stateChanged="stateChanged(1, $event)"></scroll-header>
            <html style="padding-left: 20px;padding-right: 20px;" :content="content" :imgWidth="750">

            </html>
            <div style="width: 750px;height:100px"></div>
        </scroll-view>
        <div class="details_botton">
            <div class="details_left_botton flex">
                <div class="details_left_column" @click="indexClick">
                    <text class="details_left_column_icon">&#xe853;</text>
                    <text class="details_left_column_title">首页</text>
                </div>
                <div class="details_left_column" @click="favoritesClick">
                    <text class="details_left_column_icon" v-if="existsType==0">&#xe623;</text>
                    <text class="favoritesColor" v-if="existsType==1">&#xe64d;</text>
                    <text class="details_left_column_title">收藏</text>
                </div>
                <div class="details_left_column" @click="customClick">
                    <text class="details_left_column_icon">&#xe60e;</text>
                    <text class="details_left_column_title">客服</text>
                </div>
            </div>
            <div style="width:400px;margin-right:20px;display:flex;flex-direction: row;justify-content: flex-end;align-items: center;">
                <div v-if="stockBox > 0 && product.isMarketable == true || product.isMarketable == false" class="details_botton_right details_food_right_color" @click="submitClick">
                    <text class="details_botton_title details_food_fz_color">立即秒杀</text>
                </div>
                <div v-if="stockBox == 0 " class="details_botton_no">
                    <text class="details_botton_title">暂无库存</text>
                </div>
            </div>
        </div>
        <bottomFrame :gouwuche='gouwuche' @selectedInfo="selectedInfo" ref="bottomFrame" productId="1"></bottomFrame>
    </div>
</template>
<script>
import { find } from "../../../api/product";
import { find as groudFind } from "../../../api/groupBuy";
import { buyNowForGroupBuy } from "../../../api/cart";
import { add, exists, del } from "../../../api/memberFavorites.js";
import myNavbar from "../../../components/myNavbar/myNavbar.vue";
const dom = weex.requireModule("dom");
import bottomFrame from "../../../components/bottomFrame/bottomFrame.vue";
import html from "../../../components/html/html.vue";
import { getInfo } from "../../../api/enterprise";
const communication = app.requireModule("eeui/communication");
export default {
    data() {
        return {
            groupId: "",
            groupprice: "",
            gouwuche: true,
            swiperImg: [],
            swiperVideo: [],
            product: "",
            current: "1",
            nav: ["商品", "详情"],
            navId: 0,
            id: "",
            content: "",
            swiperIndex: 0,
            spec: "选择规格",
            activity: [{}],
            marginHeight: "",
            existsType: 0,
            statusBarHeight: eeui.getStatusBarHeightPx(),
            headerType: false,
            mch: { phone: "4008001389" },
            timerData: null,
            stockBox: 0,
            endDate: "",
            marketPrice: "",
            date: "",
            hou: "",
            min: "",
            sec: "",
            ssec: "",
            interval: null,
        };
    },
    components: {
        html,
        bottomFrame,
        myNavbar,
    },
    created() {
        this.initIconFont();
        this.id = app.config.params.productId;
        this.groupId = app.config.params.groupId;
        this.groupprice = app.config.params.priceBox;
        this.marketPrice = app.config.params.marketPrice;
        this.findClick();
        this.groudFindClick();
        this.existsClick();
        this.getInfoClick();
    },
    mounted() {},
    filters: {
        price(value) {
            var toFixedNum = Number(value).toFixed(3);
            var realVal = toFixedNum.substring(
                0,
                toFixedNum.toString().length - 1
            );
            return realVal;
        },
        number(value) {
            var toFixedNum = Number(value).toFixed(0);
            return toFixedNum;
        },
    },
    methods: {
        selectedInfo(data) {
            this.spec = data.spec;
        },
        stateChanged(index, data) {
            if (data.status === "float") {
                this.navId = index;
            }
        },
        submitClick() {
            let _this = this;
            if (this.getGlobalData().token == null) {
                eeui.openPage({
                    url: "root://pages/login/msgLogin.js",
                    statusBarType: "immersion",
                    statusBarStyle: false,
                });
            } else {
                let data = {
                    productId: this.id,
                    uuid: _this.getGlobalData().uuid,
                    groupBuyId: _this.groupId,
                };
                buyNowForGroupBuy(data)
                    .then((res) => {
                        console.info("立即购买的请求--" + JSON.stringify(res));
                        if (res.type == "success") {
                            let obj = {
                                groupId: this.groupId,
                            };
                            eeui.openPage(
                                {
                                    params: obj,
                                    url: "root://pages/goods/submit/index.js",
                                    statusBarType: "immersion",
                                    statusBarStyle: false,
                                },
                                function (result) {}
                            );
                        }
                    })
                    .catch((error) => {
                        console.info(error);
                        eeui.toast({
                            message: "服务器开小差了，请重新点击购买",
                        });
                    });
            }
        },
        customClick() {
            communication.call(this.mch.phone);
        },
        favoritesClick() {
            var _this = this;
            if (this.getGlobalData().token == null) {
                eeui.openPage({
                    url: "root://pages/login/msgLogin.js",
                    statusBarType: "immersion",
                    statusBarStyle: false,
                });
            } else {
                if (_this.existsType == 0) {
                    add({
                        productId: _this.id,
                        productType: 0,
                    })
                        .then((res) => {
                            _this.existsClick();
                            eeui.toast("收藏成功");
                        })
                        .catch((error) => {});
                } else {
                    del(_this.id)
                        .then((res) => {
                            _this.existsClick();
                            eeui.toast("取消成功");
                        })
                        .catch((error) => {});
                }
            }
        },
        existsClick() {
            var _this = this;
            exists({
                productId: _this.id,
            })
                .then((res) => {
                    if (res.type == "success") {
                        _this.existsType = res.data;
                    }
                })
                .catch((error) => {
                    eeui.toast(error.content);
                });
        },
        indexClick() {
            eeui.closePage();
        },
        findClick() {
            var _this = this;
            find(_this.id)
                .then((res) => {
                    if (res.type == "success") {
                        if (res.data.products.length > 0) {
                            res.data.products.forEach(function (item) {
                                _this.stockBox += Number(item.stock);
                            });
                        }
                        if (!_this.isEmptyString(res.data.meta)) {
                            if (!_this.isEmptyString(res.data.meta.images)) {
                                res.data.meta.images.forEach(function (item) {
                                    item = _this.thumbnail(item, 750, 750);
                                });
                                _this.swiperImg = res.data.meta.images;
                            }
                            if (!_this.isEmptyString(res.data.meta.video)) {
                                _this.swiperVideo = res.data.meta.video;
                            }
                        }
                        if (_this.swiperVideo == "") {
                            this.swiperIndex = _this.swiperImg.length;
                        } else {
                            this.swiperIndex = _this.swiperImg.length + 1;
                        }
                        clearTimeout(this.timerData); //清除延迟执行

                        this.timerData = setTimeout(() => {
                            //设置延迟执行
                            if (!_this.isEmptyString(res.data.content)) {
                                _this.content = res.data.content;
                                console.log(
                                    "123321321321321321321321321321321"
                                );
                                console.log(_this.content);
                            }
                        }, 1000);
                        _this.product = res.data.products[0];
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        groudFindClick() {
            var _this = this;
            groudFind(_this.groupId).then((res) => {
                _this.endDate = res.data.groupBuy.endDate;
                _this.time()
            });
        },
        //轮播指示灯
        changeHandler: function (e) {
            this.current = e.index + 1;
        },
        scrolledClick(data) {
            var _this = this;
            if (data.y < 200) {
                this.marginHeight = data.y / 2 + "px";
            } else {
                this.marginHeight = 100 + "px";
            }

            if (_this.headerType == false && data.y > 200) {
                _this.headerType = true;
            } else if (_this.headerType == true && data.y < 200) {
                _this.headerType = false;
            }
        },
        backClick() {
            eeui.closePage();
        },
        toScroll(index) {
            if (index == 0) {
                this.$refs.myScroll.scrollToPosition(0);
            } else if (index == 1) {
                this.$refs.myScroll.scrollToPosition(6);
            }
        },
        getInfoClick() {
            getInfo()
                .then((res) => {
                    if (res.type == "success") {
                        this.mch = res.data;
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        time() {
            var that = this;
            this.interval = setInterval(function timestampToTime() {
                var date = new Date(that.endDate) - new Date();
                //new Date当前的时间戳，也可以换成自定义的时间戳
                if (date > 0) {
                    let time = date / 1000;
                    // 获取时、分、秒,毫秒
                    that.date =
                        Math.floor(date / (24 * 3600 * 1000)) < 10
                            ? "0" + Math.floor(date / (24 * 3600 * 1000))
                            : Math.floor(date / (24 * 3600 * 1000));
                    that.hou =
                        parseInt((time % (60 * 60 * 24)) / 3600) < 10
                            ? "0" + parseInt((time % (60 * 60 * 24)) / 3600)
                            : parseInt((time % (60 * 60 * 24)) / 3600);
                    that.min =
                        parseInt(((time % (60 * 60 * 24)) % 3600) / 60) < 10
                            ? "0" +
                              parseInt(((time % (60 * 60 * 24)) % 3600) / 60)
                            : parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
                    that.sec =
                        parseInt(((time % (60 * 60 * 24)) % 3600) % 60) < 10
                            ? "0" +
                              parseInt(((time % (60 * 60 * 24)) % 3600) % 60)
                            : parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
                } else {
                    //活动已结束，全部设置为'00'
                    (that.date = "00"),
                        (that.hou = "00"),
                        (that.min = "00"),
                        (that.sec = "00");
                }
            }, 100);
        },
    },
};
</script>
<style lang="css" src="../../../style/wx.css" />
<style scoped>
.app {
    flex: 1;
}

.app,
body {
    background-color: rgba(248, 248, 248, 1);
}

.scroller {
    flex: 1;
}

.details_swiper {
    width: 750px;
    height: 750px;
    position: relative;
}

.slider {
    width: 750px;
    height: 750px;
}

.image {
    width: 750px;
    height: 750px;
}

.frame {
    width: 750px;
    height: 750px;
    position: relative;
}

.details_swiper {
    width: 750px;
    height: 750px;
    position: relative;
}

.details_progress {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 70px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
}

.details_progress_title {
    font-size: 20px;
    color: white;
}

.details_price_box {
    width: 750px;
    height: 150px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: absolute;
    top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    align-items: center;
    padding-bottom: 50px;
}

.details_price_left_title {
    font-size: 26px;
    color: white;
    font-weight: 700;
    margin-top: 10px;
}

.details_price_left_bottom {
    display: flex;
    flex-direction: row;
    margin-top: 5px;
}

.details_price_icon {
    font-size: 22px;
    color: white;
    line-height: 50px;
    margin-right: 5px;
    font-weight: 700;
}

.details_price_title {
    font-size: 40px;
    color: white;
    font-weight: 700;
    line-height: 40px;
}

.details_price_market {
    font-size: 28px;
    /*color: #333333;*/
    color: grey;
    line-height: 42px;
    text-decoration: line-through;
    margin-left: 10px;
}

.details_price {
    width: 750px;
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

.details_content {
    width: 710px;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 100px;
    z-index: 2;
    background-color: white;
    margin-left: 20px;
    border-radius: 10px;
}

.icon {
    color: rgba(236, 95, 88, 1);
    font-family: iconfont2;
    font-size: 26px;
    margin-bottom: 6px;
}

.details_content_title {
    font-size: 32px;
    line-height: 50px;
    display: block;
    margin-top: 10px;
}

.details_content_subtitle {
    font-size: 24px;
    line-height: 40px;
    color: rgba(0, 0, 0, 0.3);
    display: block;
    margin-top: 10px;
}

.top_nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.naved {
    color: red;
}

.nav {
    color: black;
}

.details_botton {
    position: fixed;
    display: flex;
    bottom: 0;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 750px;
    height: 100px;
    background-color: white;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.details_botton_right {
    width: 400px;
    height: 70px;
    background-image: linear-gradient(
        to right,
        rgba(236, 95, 88, 1),
        rgb(252, 147, 147)
    );
    border-radius: 40px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.details_botton_no {
    width: 400px;
    height: 70px;
    background-color: #888888;
    border-radius: 40px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.details_botton_title {
    font-size: 32px;
}

.details_left_botton {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 330px;
    height: 100px;
}

.details_left_column {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.details_left_column_icon {
    font-family: iconfont2;
    font-size: 38px;
}

.details_left_column_title {
    display: block;
    font-size: 22px;
    line-height: 40px;
}

rich-text image {
    width: 100%;
}

.return {
    height: 100px;
    width: 160px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.returnContent {
    width: 70px;
    height: 70px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    margin-right: 10px;
}

.favoritesColor {
    font-family: iconfont2;
    color: #fc5157;
    font-size: 38px;
}

.navbar {
    width: 750px;
    height: 100px;
}
.text {
    font-size: 26px;
}
.status-bar {
    background-color: white;
}
.iconLeft {
    color: black;
    font-size: 30px;
    padding-left: 30px;
    padding-right: 30px;
    font-family: iconfont2;
}
.iconback {
    color: black;
    font-size: 30px;
    font-family: iconfont2;
}

.group_header_dateConetnt {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    right: 20px;
}

.group_header_content_titleBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.group_header_content_title {
    font-size: 28px;
    color: white;
    text-align: center;
}

.group_header_date {
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.group_header_date_icon {
    font-size: 60px;
    color: white;
    margin-left: 4px;
    margin-right: 4px;
}

.group_header_date_title {
    font-size: 28px;
    color: coral;
    font-weight: 700;
}
</style>
